<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="_fragments_anthor :: head(~{::title})">
    <meta charset="UTF-8">
    <!--移动端的展示情况-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/css/writing.css">
    <link rel="stylesheet" href="../static/css/style.css">
</head>

<body>
    <!--导航-->
    <nav th:replace="_fragments_anthor :: menu(5)" class="ui inverted attached segment m-padded-tb-mini" id="navMenu" style="display: none;">
        <div class="ui teal header">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Turo</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="Search....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>

    </nav>

<!--    粒子动态-->
    <div id="particles-js"></div>


    <!-- 前面的图片 -->

    <div class="ui blogImg">
        <img th:src="@{/img/winter2.jpg}"  alt="" class="ui rounded fluid image">
        <div class="ui blogTitle">
            <div class="blogZi">
                <p class="ui center aligned header font-s" > 闪光的未必都是金子，而沉默的也不一定就是石头。</p>
                <p class="ui center aligned header font-s">每一天的努力，只是为了让远方变得更近一些。</p>
                <p class="ui center aligned header font-s nbsp"> ———高五毛———</p>
            </div>
        </div>
    </div>
    <!--中间部分-->
    <div id="waypoint " class="m-container-small m-padded-tb-big animated pulse ">

        <div class="ui container ">
            <div class="ui attached padded segment ">
                <h2 class="ui center aligned header ">关于我</h2>
                <br>
                <div id="content " class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-big " >
                    <h3 class="about-str">个人介绍</h3>
                    <h4 class="about-str">个人简介</h4>
                    <p>大二学生，目前主攻后端开发。</p>
                    <h4 class="about-str">擅长技术</h4>
                    <p>掌握JavaSE、JavaEE</p>
                    <p>基本掌握spring、springMVC、Mybatis、SpringBoot</p>
                    <p>熟练mysql、Linux基本命令</p>
                    <p>简单使用maven、git</p>
                    <p>基本会使用SpringSecurity、shiro等安全框架</p>
                    <p>简单使用html5、css3、bootstrap开发页面原型</p>

                    <h3 class="about-str" style="color: teal;">我的规划</h3>
                    <h4 class="about-str" >近期规划</h4>
                    <p>1、巩固之前学的技术</p>
                    <p>2、继续钻研算法，MySQL，框架官方文档</p>
                    <p>3、多做项目，了解前沿技术</p>
                    <p>4、养成定期学习总结的习惯</p>

                    <h3 class="about-str" style="color: teal;">博客介绍</h3>
                    <p>博客名称：Turo</p>
                    <p>博客创建时间：2021年3月30日</p>
                    <h4 class="about-str">博客使用的技术：</h4>
                    <p>1、前端原型：html5、css3、js、Jquery、Semantic UI以及一些插件</p>
                    <p>2、后端：SpringBoot、MySQL、thymeleaf</p>
                    <h4 class="about-str">日志</h4>
                    <p>1、网站各项功能还未完善</p>
                    <p>2、评论功能还有待优化处理</p>
                    <p>3、页面美观度需进一步改善</p>
                    <p>初期前端+后端逻辑处理均由笔者一人完成，所以浏览过程中如出现bug情况还需见谅！</p>
                </div>
            </div>
        </div>
    </div>

    <!--底部footer-->
    <footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive bottom">
        <div class="ui center aligned container bottom-one">
            <div class="ui inverted divided stackable grid " id="bottom-two">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/img/wechat.jpg" th:src="@{/img/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-spaced m-opacity-mini">学习网站 </h4>
                    <div class="ui inverted link list">
                        <a href="https://github.com/" class="item"><i class="github icon"></i>GitHub</a>
                        <a href="https://www.bilibili.com/" class="item"><i class="bullhorn icon"></i>BiliBili</a>
                        <a href="https://gitee.com/" class="item"><i class="git icon"></i>Gitee</a>
                        <a href="" class="item"><i class="paper plane icon"></i>CSDN</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header  m-text-spaced m-opacity-mini">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email: none-j@qq.com</a>
                        <a href="#" class="item">QQ: 1521126127</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header  m-text-spaced m-opacity-mini">Turo</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、学习、思考相关的任何内容，希望可以给来到这的人有所帮助……</p>
                </div>
            </div>
            <div class="ui inverted section divider "></div>
            <div>
                <div class="m-text-thin m-text-spaced m-opacity-tiny" id="time"></div>
                <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @2021-2022 Turo Designed by Turo</p>
            </div>
        </div>
    </footer>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="../static/lib/js/particles.min.js"></script>
    <script src="../static/lib/js/app.js"></script>
    <script src="../static/lib/js/writing.js"></script>
    <!--/*/</th:block>/*/-->
    <script>
        $('.menu.toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hide');
        });

        $('.wechat').popup({
            popup: $('.wechat-qr'),
            on: 'hover',
            position: 'bottom center'
        });


        $('.qq').popup();
    </script>
</body>

</html>